<template>
	<div>
		<h3>数据总览</h3>
		<!-- <X-icon /> -->
		<div class="echarts">
			<Xecharts type="bar" title="近七日门诊充值情况" />
			<Xecharts type="line" width="300" height="300" title="近七日挂号预约情况" />
			<!-- <Xecharts type="pie"  title="XXX"/> -->
			<!-- 这个title 组件内获取不到 -->
		</div>

		<!--   <div class="box">
			<p>模型整体训练分析</p>
			<div class="content">
				<Charts
					type="line"
					title="训练样本总数趋势统计"
					:xText="line.xText"
					:data="line.data"
				/>
				<Charts
					type="bar"
					title="模型样本测试统计"
					:dimensions="bar.dimensions"
					:source="bar.source"
				/>
				<Charts
					type="pie"
					title="应用场景体验占比情况"
					:data="pie.data"
				/>
			</div> 
      </div> -->
	  <videocom />
		<vue3VideoPlay v-bind="options" />
		<!-- poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg" -->
	</div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import 'vue3-video-play/dist/style.css'
import videocom from './ui/video.vue'
const options = reactive({
	width: "800px", //播放器宽度
	height: "450px", //播放器高度
	color: "#409eff", //主题色
	title: "", //视频名称
	src: "../../../public/二黄.mp4", //视频源
	muted: false, //静音
	webFullScreen: false,
	speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
	autoPlay: false, //自动播放
	loop: false, //循环播放
	mirror: false, //镜像画面
	ligthOff: false, //关灯模式
	volume: 0.3, //默认音量大小
	control: true, //是否显示控制
	controlBtns: [
		"audioTrack",
		"quality",
		"speedRate",
		"volume",
		"setting",
		"pip",
		"pageFullScreen",
		"fullScreen",
	], //显示所有按钮,
});

const line = reactive({
	xText: ["1月", "2月", "3月", "4月", "5月", "6月"],
	data: [820, 932, 901, 934, 1290, 1330],
});
const bar = reactive({
	dimensions: ["product", "螺栓检测", "人脸检测", "SMOKE 检测"],
	source: [
		{
			product: "1月",
			螺栓检测: 43.3,
			人脸检测: 85.8,
			"SMOKE 检测": 93.7,
		},
		{
			product: "2月",
			螺栓检测: 83.1,
			人脸检测: 73.4,
			"SMOKE 检测": 55.1,
		},
		{
			product: "3月",
			螺栓检测: 86.4,
			人脸检测: 65.2,
			"SMOKE 检测": 82.5,
		},
		{
			product: "4月",
			螺栓检测: 72.4,
			人脸检测: 53.9,
			"SMOKE 检测": 39.1,
		},
		{
			product: "5月",
			螺栓检测: 72.4,
			人脸检测: 53.9,
			"SMOKE 检测": 39.1,
		},
		{
			product: "6月",
			螺栓检测: 72.4,
			人脸检测: 53.9,
			"SMOKE 检测": 39.1,
		},
	],
});
const pie = reactive({
	data: [
		{ value: 555, name: "场景1" },
		{ value: 444, name: "场景2" },
		{ value: 111, name: "场景3" },
		{ value: 222, name: "场景4" },
		{ value: 124, name: "场景5" },
	],
});
</script>
<style lang="scss" scoped>
.echarts {
	display: flex;
}

h3 {
	margin-bottom: 20px;
}
</style>